<script setup name="maintenanceProjectForm">
import { GetListAPI } from '@/api/device/equipment'
import { GetDeviceDdlAPI } from '@/api/device/maintenance/project.js'

// vue3方法实例
const { proxy } = getCurrentInstance()
const { equipment_failure_type } = proxy.useDict(['equipment_failure_type'])

// 子传父
const emit = defineEmits()

// 父传子
const props = defineProps({
  isShow: {
    type: Boolean,
    default: false,
  },
  //   传入数据 用于回显
  data: {
    type: Object,
    default: () => {},
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false,
  },
  //   传入数据 弹窗标题
  title: {
    type: String,
    default: '新增',
  },
})

// 标签页字段
const activeName = ref('计划信息')

const ruleFormRef = ref(null)

const tableSel = ref([])

const deviceSel = ref([])
// 表单字段
const ruleForm = reactive({
  knowledgeCode: '',
  knowledgeName: '',
  deviceId: '',
  knowledgeFailureType: '',
  knowledgeFailureDescription: '',
  knowledgeFailurePicture: '',
  knowledgeFailureAnalysis: '',
  knowledgeFailureProcess: '',
})

// 自定义验证
const checkAge = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('请填写计划配置项'))
  }
}
// 表单校验
const rules = reactive({
  knowledgeCode: [
    { required: true, message: '请填写知识库编号', trigger: 'blur' },
  ],
  knowledgeName: [
    { required: true, message: '请填写知识库名称', trigger: 'blur' },
  ],
  deviceCode: [
    { required: true, message: '请选择设备信息', trigger: 'change' },
  ],
  // name: [{ required: true, message: '请选择计划结束时间', trigger: 'change' }]
})

// 提交方法
const submit = async () => {
  const valid = await ruleFormRef.value.validate()
  if (!valid) return false
  return ruleForm
}

// 勾选数据
const handleSelectionChange = (rows) => {
  tableSel.value = rows
}

// 删除表格表单
const remove = (scope) => {
  if (tableSel.value.length > 0) {
    tableSel.value.forEach((item) => {
      const Find = ruleForm.list.findIndex(
        (itemy) => item.deviceId == itemy.deviceId
      )
      ruleForm.list.splice(Find, 1)
    })
  } else {
    ruleForm.list.splice(scope.$index, 1)
  }
}

// 选择下拉带出相应数据
const deviceCodeChange = (val) => {
  const result = deviceSel.value.find((item) => item.id == val)
  if (result) {
    ruleForm.deviceName = result.deviceName
    ruleForm.deviceType = result.deviceType
    ruleForm.deviceUnitType = result.deviceUnitType
    ruleForm.deviceId = result.id
  }
}

// 获取设备列表信息
const getDeviceSel = async () => {
  const { data: res } = await GetDeviceDdlAPI()
  deviceSel.value = res
}

// 监听回显
const initData = async () => {
  if (props.data?.knowledgeId) {
    Object.keys(props.data).forEach(
      (itemKey) => (ruleForm[itemKey] = props.data[itemKey])
    )
    ruleForm.knowledgeFailureType = String(ruleForm.knowledgeFailureType)
    ruleForm.deviceType = props.data.deviceTypeDict
    const { data: res } = await GetDeviceDdlAPI()
    console.log(res, ruleForm, '')
    const result = res.find((item) => item.id == ruleForm.deviceId)
    deviceSel.value = res
    if (result) {
      ruleForm.deviceName = result.deviceName
      ruleForm.deviceType = result.deviceType
      ruleForm.deviceUnitType = result.deviceUnitType
      ruleForm.deviceId = result.id
    }
  } else {
    getDeviceSel()
  }
  // deviceCodeChange()
}

initData()
// 导出方法
defineExpose({ submit })
</script>
<template>
  <el-form
    inline
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
    status-icon
  >
    <div class="title">知识库信息</div>
    <el-divider />
    <el-form-item label="知识库编号" prop="knowledgeCode" v-if="props.disabled">
      <el-input
        clearable
        v-model="ruleForm.knowledgeCode"
        disabled
        placeholder="请填写知识库编号"
      />
    </el-form-item>
    <el-form-item label="知识库名称" prop="knowledgeName">
      <el-input
        clearable
        v-model="ruleForm.knowledgeName"
        :disabled="props.disabled"
        placeholder="请填写知识库名称"
      />
    </el-form-item>
    <el-form-item label="设备编号" prop="deviceId">
      <el-select
        :disabled="props.disabled"
        v-model="ruleForm.deviceId"
        filterable
        placeholder="请选择设备编号"
        @change="deviceCodeChange"
      >
        <el-option
          v-for="item in deviceSel"
          :key="item.deviceId"
          :label="item.deviceCode"
          :value="item.id"
        >
          <span style="float: left">{{ item.deviceName }}</span>
          <span
            style="
              float: right;
              color: var(--el-text-color-secondary);
              font-size: 13px;
            "
            >{{ item.deviceCode }}</span
          >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="设备名称" prop="knowledgeName">
      <el-input
        clearable
        v-model="ruleForm.deviceName"
        disabled
        placeholder=""
      />
    </el-form-item>
    <el-form-item label="设备类型">
      <el-input
        clearable
        disabled
        v-model="ruleForm.deviceType"
        placeholder=""
      />
    </el-form-item>

    <el-form-item label="设备型号">
      <el-input
        clearable
        disabled
        v-model="ruleForm.deviceUnitType"
        placeholder=""
      />
    </el-form-item>

    <!-- <el-form-item label="设备位置">
      <el-input clearable disabled v-model="ruleForm.name" placeholder="请填写设备位置" />
    </el-form-item> -->
    <div class="title">故障信息</div>
    <el-divider />
    <el-form-item label="故障类型">
      <el-select
        :disabled="props.disabled"
        v-model="ruleForm.knowledgeFailureType"
        placeholder="请选择故障类型"
      >
        <el-option
          v-for="item in equipment_failure_type"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="故障内容">
      <el-input
        :disabled="props.disabled"
        clearable
        v-model="ruleForm.knowledgeFailureContent"
        :rows="3"
        placeholder="故障内容"
      />
    </el-form-item>
    <div class="rk">
      <el-form-item label="故障描述">
        <el-input
          :disabled="props.disabled"
          clearable
          v-model="ruleForm.knowledgeFailureDescription"
          :rows="3"
          type="textarea"
          placeholder="说点什么吧！"
        />
      </el-form-item>
    </div>
    <div class="rk">
      <el-form-item label="故障图片">
        <p-imageUpload
          v-model="ruleForm.knowledgeFailurePicture"
          v-if="!props.disabled"
        />
        <p-imagePreview :src="ruleForm.knowledgeFailurePicture" v-else />
      </el-form-item>
    </div>

    <div class="title">故障处理</div>
    <el-divider />
    <div class="rk">
      <el-form-item label="故障分析">
        <el-input
          :disabled="props.disabled"
          clearable
          v-model="ruleForm.knowledgeFailureAnalysis"
          :rows="3"
          type="textarea"
          placeholder="说点什么吧！"
        />
      </el-form-item>
    </div>
    <div class="rk">
      <el-form-item label="处理过程">
        <el-input
          :disabled="props.disabled"
          clearable
          v-model="ruleForm.knowledgeFailureProcess"
          :rows="3"
          type="textarea"
          placeholder="说点什么吧！"
        />
      </el-form-item>
    </div>
    <!-- <div class="title">备件更换</div>
    <el-divider />

    <div class="flex-items-center flex-between">
      <div class="title"></div>

      <div class="flex" v-if="!props.disabled">
        <el-tooltip class="box-item" effect="dark" content="添加" placement="top-start">
          <el-icon @click="materialShow = true"><Plus /></el-icon>
        </el-tooltip>
        <div style="margin: 0 10px"></div>
        <el-tooltip class="box-item" effect="dark" content="勾选删除" placement="top-start">
          <el-icon @click="remove()"><Minus /></el-icon>
        </el-tooltip>
      </div>
    </div>

    <el-table stripe border :data="ruleForm.list" style="margin-top: 10px" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" fixed="left" />
      <el-table-column label="序号" width="70" type="index" />
      <el-table-column label="备件编码" prop="materialCode" width="auto" />
      <el-table-column label="备件名称" prop="materialName" width="auto" />
      <el-table-column label="备件类型" prop="materialSpec" width="auto" />
      <el-table-column label="参考数量" width="120">
        <template #default="scope">
          <el-input v-model="scope.row.batchNum" :disabled="props.disabled"></el-input>
        </template>
      </el-table-column>
    </el-table> -->
  </el-form>
</template>

<style lang="scss" scoped>
.rk ::v-deep .el-form-item {
  width: 100% !important;
}
.title {
  color: #3292fb;
}
</style>
